<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<html>
<head>
	<meta charset="utf-8">
	<title>持明法洲登录页面</title>

	<script src="${pageContext.request.contextPath}/js/echarts.js"></script>
	<script src="${pageContext.request.contextPath}/js/china.js"></script>
</head>

<body>
	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
	<div id="main" style="width: 600px;height:400px;"></div>

	<div id="myChina" style="width: 600px;height:400px;"></div>

	<script type="text/javascript">
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));

		var myChina = echarts.init(document.getElementById('myChina'));

		$.ajax({
			url:"",
			success:function (data) {
				// data是一个数组
				// 分别取出男女人数

				// 指定图表的配置项和数据 持明法洲用户男女人数对比
				var option = {
					// 图表的标题
					title: {
						text: '持明法洲用户男女人数对比'
					},
					tooltip: {},
					// legend 传奇 【数】系列  数据类别  例如：销量 人数
					legend: {
						data:['人数']
					},
					// x轴坐标
					xAxis: {
						data: ["男","女"]
					},
					// y轴是自动识别的  不用写
					yAxis: {},
					// 数据赋值 给x轴对应的坐标赋值
					series: [
						{
							// name 对应系列中的值
							name: '人数',
							// 图表的样式 bar 柱状图 line 折线图 pie 饼状图
							type: 'line',
							// x轴坐标对应的坐标值  数组
							data: [data[1].value, data[0].value]
						}
					]
				};

				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			}
		})


		//    配置地区分布图表数据
		var option3 = {
			title : {
				text: '用户地区分布',
				left: 'center'
			},
			tooltip : {
				trigger: 'item'
			},
			legend: {
				orient: 'vertical',
				left: 'left',
				data:['用户人数']
			},
			visualMap: {
				min: 0,
				max: 25000,
				left: 'left',
				top: 'bottom',
				text:['高','低'],           // 文本，默认为数值文本
				calculable : true
			},
			toolbox: {
				show: true,
				orient : 'vertical',
				left: 'right',
				top: 'center',
				feature : {
					mark : {show: true},
					dataView : {show: true, readOnly: false},
					restore : {show: true},
					saveAsImage : {show: true}
				}
			},
			series : [
				{
					name: '用户人数',
					type: 'map',
					mapType: 'china',
					roam: false,
					label: {
						normal: {
							show: false
						},
						emphasis: {
							show: true
						}
					},
					data:data
				}
			]
		};



		myChina.setOption(option3);
	</script>
</body>
</html>
